<template>
	<view class="page-cont" :style="themeStore.theme">
		<view class="device-list">
			<view :class="['device-item', item.alarm ? 'device-item-alarm' : '']" v-for="(item, index) in deviceList"
				:key="index" @click="handleDetailClick(item)">
				<view class="device-item-top">
					<image class="device-item-top-icon" src="/static/project-ice.png" mode="aspectFill"></image>
					<view class="device-item-limit">
						<view class="device-item-limit-name">上下限：</view>
						<view class="device-item-limit-value">{{formatDecimal(item.confmapping.min)}}°C~{{formatDecimal(item.confmapping.max)}}°C
						</view>
					</view>
					<view :class="['device-item-status', item.alarm ? 'device-item-status-alarm' : '']"></view>
				</view>
				<view class="device-item-name">{{item.name}}</view>
				<view class="device-item-bottom">
					<view class="device-item-temp" @click.stop="handleChartClick(item)">
						<view :class="['device-item-temp-num', item.warn ? 'device-item-temp-warn' : '']">{{item.num}}°C
						</view>
						<view class="device-item-temp-name">
							<view>温度</view>
							<image class="device-item-temp-icon" src="/static/temp_chart.png"></image>
						</view>
					</view>
					<image class="device-item-arrow" src="/static/right_arrow.png"></image>
				</view>
			</view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { reactive, ref, watch, onMounted } from 'vue';
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import { storeToRefs } from 'pinia';
	import { getProjectList, getProjectModel, getProjectMonitor, getProjectAlarm } from "@/api/home.js";
	import useHomeStore from '@/store/home';
	import useThemeStore from '@/store/theme';
	const themeStore = useThemeStore();
	const homeStore = useHomeStore();
	const { projectId, projectName, projectType, projectModus, deviceList } = storeToRefs(homeStore);
	const props = defineProps({
		type: String,
		alarmList: Array
	});

	onMounted(() => {
		getData();
	});
	
	// onShow(() => {
	// 	getData();
	// });

	// 获取项目的模块数据
	function getData() {
		let list = projectModus.value["20"];
		let childTemp = projectModus.value["21"];//温度
		let childHum = projectModus.value["22"];//湿度，暂时不用
		list.forEach(item1 => {
			childTemp.forEach(item2 => {
				if (item1.id == item2.pid) {
					item1.datamapping = JSON.parse(item2.datamapping || "");
					item1.cid = item2.id;
				}
			});
			childHum.forEach(item2 => {
				if (item1.id == item2.pid) {
					item1.datamappingHum = JSON.parse(item2.datamapping || "");
					item1.cid = item2.id;
				}
			});
		});
		homeStore.setDeviceList(list);//保存设备列表
		getList();
	}

	// 获取设备数据
	function getList() {
		let arr = [];
		deviceList.value.forEach(element => {
			if (element.confmapping instanceof String) {
				element.confmapping = JSON.parse(element.confmapping || "");
			} else {
				element.confmapping = element.confmapping;
			}
			arr.push(element.datamapping[0]);
		});
		if (!arr.length) {
			return;
		}
		getProjectMonitor({ keys: arr }).then(res => {
			// 获取预警设备的id
			let alarmIds = props.alarmList.map(element => {
				return element["oid"];
			});
			deviceList.value.forEach(element => {
				let key = element.datamapping;
				let confmapping = element.confmapping;
				let min = Number(confmapping.min);//下限
				let max = Number(confmapping.max);//上限
				let isEmpty = Object.keys(res).indexOf(key + '') === -1 ? true : false;
				element.num = !isEmpty ? Number(res[key] || 0) : "-";
				// 判断当前设备是否超标
				if (element.num < min || element.num > max) {
					// 不在上下限范围
					element.warn = true;
				} else {
					element.warn = false;
				}
				// 判断当前设备是否预警
				if (alarmIds.indexOf(element.cid) !== -1) {
					element.alarm = true;
				} else {
					element.alarm = false;
				}
			});
		});
	}

	// 详情
	function handleDetailClick(e) {
		homeStore.setDeviceId(e.id);//保存设备id
		homeStore.setDeviceName(e.name);//保存设备名称
		uni.navigateTo({
			url: `/pages/home/coldroom`,
		});
	}
	// 温度曲线
	function handleChartClick(e) {
		homeStore.setDeviceId(e.id);//保存设备id
		homeStore.setDeviceName(e.name);//保存设备名称
		uni.navigateTo({
			url: '/pages/home/detail-chart'
		});
	}
	
	function formatDecimal(num) {
	  return num?parseFloat(num.toFixed(2)).toString():"-";
	}
</script>
<style lang="scss" scoped>
	.page-cont {
		position: relative;

		.device-list {
			margin-top: 5px;
			padding: 0 15px 15px;
			display: flex;
			flex-wrap: wrap;
			box-sizing: border-box;

			.device-item {
				margin-left: 15px;
				padding: 10px;
				width: calc(50% - 8px);
				border-radius: 5px;
				background: linear-gradient(180deg, rgba(238, 240, 249, 1), #fff);
				border: 1px solid #fff;
				box-shadow: 0px 10px 20px 0px rgba(95, 131, 249, 0.1);
				box-sizing: border-box;

				&:nth-child(2n + 1) {
					margin-left: 0;
				}

				&:nth-child(n + 3) {
					margin-top: 15px;
				}

				&.device-item-alarm {
					border-color: #FC4A2E;
					background: linear-gradient(180deg, #F9F1F0, #fff);
				}
			}

			.device-item-top {
				position: relative;
				display: flex;

				.device-item-top-icon {
					width: 40px;
					height: 40px;
				}

				.device-item-limit {
					margin-left: 10px;
					width: calc(100% - 50px);
				}

				.device-item-limit-name,
				.device-item-limit-value {
					color: #8A95A0;
					font-size: 11px;
					word-break: break-all;
				}

				.device-item-limit-value {
					margin-top: 5px;
				}

				.device-item-status {
					position: absolute;
					top: 0;
					right: 0;
					width: 8px;
					height: 8px;
					border-radius: 4px;
					background-color: #75E0A8;

					&.device-item-status-alarm {
						background-color: #FC4A2E;
					}
				}
			}

			.device-item-name {
				margin-top: 7px;
				color: #333;
				font-size: 13px;
				font-weight: 600;
			}

			.device-item-bottom {
				margin-top: 15px;
				display: flex;
				justify-content: space-between;
				align-items: flex-end;

				.device-item-temp-num {
					color: $theme-color;
					font-size: 22px;
					font-weight: 600;

					&.device-item-temp-warn {
						color: #FC4A2E;
					}
				}

				.device-item-temp-name {
					padding: 0 10px;
					height: 20px;
					display: flex;
					align-items: center;
					color: #878F96;
					font-size: 13px;
					border-radius: 10px;
					border: 1px solid #FFFFFF;
					box-shadow: 0px 0px 10px 0px rgba(95, 131, 249, 0.2);
					background: linear-gradient(180deg, rgba(236, 239, 247, 1), rgba(255, 255, 255, 1));
				}

				.device-item-temp-icon {
					margin-left: 7px;
					width: 12px;
					height: 11px;
				}

				.device-item-arrow {
					width: 15px;
					height: 14px;
				}
			}
		}
	}
</style>